<!DOCTYPE html>
<!--[if lte IE 6]>            <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IEMobile 7]>          <html class="no-js iem7" lang="en"> <![endif]-->
<!--[if (IE 7)&(!IEMobile)]>  <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>                <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <title>Blueprint – A React-based UI toolkit for the web</title>
    <meta name="description" content="A React-based UI toolkit for the web">
    <meta name="viewport" content="width=device-width">

    <!-- Facebook Sharing -->
    <meta property="og:url" content="http://blueprintjs.com/" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Blueprint - A React-based UI toolkit for the web" />
    <meta property="og:description" content="A React-based UI toolkit for the web" />
    <meta property="og:image" content="http://blueprintjs.com/assets/img/fb-image.png" />

    <!-- Styles -->
    <link rel="stylesheet" href="blueprint-landing.css">
    <link rel="icon" href="assets/img/favicon.png" sizes="32x32" type="image/png">

    <!-- Google Analytics -->
    <script type="text/javascript">
    if (location.hostname === "blueprintjs.com") {
      (function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,"script","https://www.google-analytics.com/analytics.js","ga");
      ga("create", "UA-36986232-47", "auto");
      ga("send", "pageview", { page: location.pathname + location.search  + location.hash });
    }
    </script>
  </head>
  <body>
    <header>
      <canvas height="600" class="pt-logo-background"></canvas>
      <div class="pt-wireframes"></div>
      <canvas height="600" class="pt-logo"></canvas>
      <div class="pt-container">
        <h1>Blueprint</h1>
        <h3>A React-based UI toolkit for the web</h3>
        <div>
          <a class="pt-button pt-minimal" href="docs/">Docs</a>
          <span class="pt-icon-standard pt-icon-dot"></span>
          <a class="pt-button pt-minimal" href="https://github.com/palantir/blueprint" target="_blank">GitHub</a>
        </div>
      </div>
    </header>
    <div class="pt-info">
      <div class="pt-description">
        <div class="pt-container">
          <h2>Build complex, data-dense interfaces with ease</h2>
          <div class="pt-running-text">
            Blueprint is a collection of <a href="https://facebook.github.io/react/" target="_blank">React</a>
            UI components that cover the majority of the common interface elements, patterns, and interactions on
            the web. Using Blueprint ensures that you’ll end up with an elegant and easy-to-use UI, freeing you to
            focus on building your product&mdash;not the atomic pieces that comprise it.
          </div>
          <a class="pt-button pt-large pt-intent-primary" href="docs/">Go to documentation</a>
          <a class="pt-button pt-large" href="https://github.com/palantir/blueprint" target="_blank">View GitHub repository</a>
        </div>
        <div class="pt-components"></div>
      </div>
      <div class="pt-container pt-features pt-running-text-small">
        <div class="pt-feature-column">
          <div class="pt-feature">
            <img src="assets/img/productivity.svg" alt="Productivity" />
            <h4>Productivity</h4>
            Enjoy a set of high quality generic components that you can use out of the box.
          </div>
          <div class="pt-feature">
            <img src="assets/img/composition.svg" alt="Composition" />
            <h4>Composition</h4>
            React components and TypeScript interfaces are easy to compose together.
          </div>
          <div class="pt-feature">
            <img src="assets/img/themes.svg" alt="Custom styles" />
            <h4>Custom styles</h4>
            Styles are built with Sass and designed to be flexible and customizable.
          </div>
        </div>
        <div class="pt-feature-column">
          <div class="pt-feature">
            <img src="assets/img/system.svg" alt="Design system" />
            <h4>Design system</h4>
            Universal design concepts and modifiers are applicable across components.
          </div>
          <div class="pt-feature">
            <img src="assets/img/types.svg" alt="Types and tests" />
            <h4>Types and tests</h4>
            TypeScript makes developing with Blueprint faster and more predictable with static types.
          </div>
          <div class="pt-feature">
            <img src="assets/img/accessibility.svg" alt="Accessibility" />
            <h4>Accessibility</h4>
            Color combinations and keyboard interactions have been carefully crafted to be accessible.
          </div>
        </div>
        <div class="pt-clear"></div>
      </div>
    </div>
    <div class="pt-getting-started pt-dark">
      <h2>Let’s get started</h2>
      <div class="pt-steps">
        <div class="pt-step">
          <div class="pt-step-number">
            1
          </div>
          <h4>Install via NPM</h4>
          <pre>> npm install --save @blueprintjs/core</pre>
        </div>
        <div class="pt-step">
          <div class="pt-step-number">
            2
          </div>
          <h4>Import and use the components</h4>
          <pre>import {
    Button,
    Menu,
    MenuItem,
    MenuDivider,
    Popover,
    Position
} from "@blueprintjs/core";

const menu = (
    &lt;Menu>
        &lt;MenuItem text="New" />
        &lt;MenuItem text="Open" />
        &lt;MenuItem text="Save" />
        &lt;MenuDivider />
        &lt;MenuItem text="Settings..." />
    &lt;/Menu>
);

&lt;Popover content={menu} position={Position.BOTTOM_RIGHT}>
    &lt;Button text="Actions" />
&lt;/Popover></pre>
        </div>
        <div class="pt-step">
          <div class="pt-step-number">
            3
          </div>
          <h4>Learn and contribute!</h4>
          <a class="pt-button pt-large pt-intent-primary" href="docs/">Go to documentation</a>
          <a class="pt-button pt-large" href="https://github.com/palantir/blueprint" target="_blank">View GitHub repository</a>
        </div>
      </div>
    </div>
    <div class="pt-about pt-dark">
      <div class="pt-container">
        <img src="assets/img/palantir.svg" alt="Palantir" />
        <p>Blueprint is an open source project<br>developed at Palantir.</p>
        <div class="pt-hiring">
          <div>We’re hiring designers and engineers!</div>
          <a class="pt-button pt-intent-primary" href="https://www.palantir.com/careers/" target="_blank">View openings</a>
        </div>
      </div>
      <div class="pt-copyright pt-dark">
        <div class="pt-container">
          <div>© Palantir Technologies</div>
          <div>Licensed under <a href="https://github.com/palantir/blueprint/blob/master/LICENSE" target="_blank">BSD</a></div>
        </div>
      </div>
    </div>
  </body>
  <script src="blueprint-landing.js"></script>
</html>
